	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <!--第一步：定义vuejs管理渲染的范围-->
    <div id="app">

        <form action="" v-on:submit.prevent="save">
            <p>用名：<input type="text" v-model="user.username"></p>
            <p>密码：<input type="text" v-model="user.password"></p>
            <p>性别：
                <label><input type="radio" name="male" v-model="user.male" value="1">男</label>
                <label><input type="radio" name="male" v-model="user.male" value="0">女</label>
            </p>
            <p>兴趣：
                <label><input type="checkbox" name="hobbys" v-model="user.hobbys" value="看书">看书</label>
                <label><input type="checkbox" name="hobbys" v-model="user.hobbys" value="旅游">旅游</label>
                <label><input type="checkbox" name="hobbys" v-model="user.hobbys" value="逛街">逛街</label>
                <label><input type="checkbox" name="hobbys" v-model="user.hobbys" value="写代码">写代码</label>
            </p>
            <p>介绍：<textarea v-model="user.intro" cols="30" rows="10"></textarea></p>
            <p>地址：
                <select v-model="user.address">
                    <option value="">--请选择--</option>
                    <option v-for="(test,index) in tests" :value="test">{{test.text}}</option>
                </select>

                <select v-model="user.address2">
                    <option value="">--请选择--</option>
                    <option v-for="(test,index) in tests" :value="test.value">{{test.text}}</option>
                </select>

                <select v-model="user.addresses" multiple>
                    <option value="">--请选择--</option>
                    <option v-for="test in tests" :value="test">{{test.text}}</option>
                </select>
            </p>
            <input type="submit" value="保存">
        </form>

        {{user}}

    </div>

    <!-- 第二步：导入vue.js文件 -->
    <script src="js/vuejs-2.5.16.js"></script>
    <script>

          // 第三步：定义vuejs对象，开始进行视图和数据的渲染
          var app = new Vue({
              el:"#app",
              data:{title:"Hello world!",  tests: [
                      { value: "s1001", text: '长沙' },
                      { value: "s1002", text: '广州' },
                      { value: "s1003", text: '深圳' },
                      { value: "s1004", text: '上海' },
                  ],user:{
                username:"",
                password:"",
                male:0,
                hobbys:[],
                intro:"",
                address:{},
                address2:"",
                addresses:[]
              }},

              // 定义事件
              methods:{
                save:function(){
                        var username = this.$data.user.username;
                        var password = this.$data.user.password;
                        var male = this.$data.user.male;
                        var maletext = male==1?"男":"女";
                        var hobbys = this.$data.user.hobbys;
                        var intro = this.$data.user.intro;
                        // 获取 select的text/value的第一种方式
                        var address = this.$data.user.address.value;
                        var addresstext = this.$data.user.address.text;
                        //获取select的text/value的第二种方式：
                        var address2 = this.$data.user.address2;
                        var address2text = this.tests.find(function(item){
                            return item.value == address2})['text']
                        var addresses = this.$data.user.addresses;
                        console.log(username);
                        console.log(password);
                        console.log(male);
                        console.log(hobbys);
                        console.log(intro);
                        console.log(address);
                        console.log(addresstext);
                        console.log(addresses);
                        console.log(address2);
                        console.log(address2text);
                        console.log("==================")
                }
              },
              // dom加载完毕执行的回调函数
              mounted:function(){
              }
          }) ;

    </script>
</body>
</html>		